/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/// TOC
//============================================================================================
//
// - Canvas Brand Variants
// - Custom Branding
// - Canvas LMS Color Sheet
// - Canvas Theme Color Variables
//
//============================================================================================

// This imports the variables needed to support accessibility ($use_high_contrast)
// You can also use the sass function that helps ensure color contrast ratio.
// Look in /sass-functions/ for more information on how that is used
// @import "variant_variables";

@import "brand";

$use_high_contrast:		false;


//=======================
// Canvas LMS Color Sheet
//=======================
// Our color variables in Canvas are simple and easy to integrate
// We use a two-tiered variable process with Canvas color variables.
// When you need to use a color, please create a functional variable name
// and use the color variable name of your choosing. See examples below.

// These "@if $use_high_contrast ..." conditions need to be run before we load
// the autogenerated brandable variables because we are setting up the correct
// "default value" for it to use.

//====================================
// Abstract Color Variables
//====================================
$electric:                  #008EE2; // blue
@if $use_high_contrast {    $electric: #0770A3; }
$shamrock:                  #00AC18; // green
@if $use_high_contrast {    $shamrock: #127A1B; }
$barney:                    #BF32A4; // magenta
@if $use_high_contrast {    $barney: #B8309E; }
$crimson:                   #EE0612; // red
@if $use_high_contrast {    $crimson: #D01A19; }
$fire:                      #FC5E13; // orange
@if $use_high_contrast {    $fire: #C23C0D; }

//====================================
// Default Functional Swatches
//====================================

// this just needs to be defined outside of this @if $use_high_contrast {...} block
// so its scope is global and not just inside that @if, so other sheets can use it.
$ic-brand-primary-high-contrast: null;
$variables-have-been-defined: false !default;
@if $use_high_contrast {
  $ic-brand-primary-high-contrast: #0770A3;
  $ic-link-color-high-contrast: #0073A7;
  @if not $variables-have-been-defined { // makes sure this is only output once
    $variables-have-been-defined: true;
    :root {
      --ic-brand-primary: $ic-brand-primary-high-contrast;
      --ic-brand-primary-darkened-5: darken($ic-brand-primary-high-contrast, 5);
      --ic-brand-primary-darkened-10: darken($ic-brand-primary-high-contrast, 10);
      --ic-brand-primary-lightened-15: lighten($ic-brand-primary-high-contrast, 15);
      --ic-link-color: $ic-link-color-high-contrast;
      --ic-link-color-darkened-10: darken($ic-link-color-high-contrast, 10);
      --ic-link-color-lightened-10: darken($ic-link-color-high-contrast, 10);
    }
  }
}

$ic-color-success:          $shamrock;
$ic-color-action:           $barney;
$ic-color-danger:           $crimson;
$ic-color-alert:            $fire;

//====================================
// Gray-ish Scale
//====================================

$ic-color-dark:              #2D3B45; // licorice
$ic-color-medium-darker:     #394B58; // oxford
$ic-color-medium:            #73818C; // slate
@if $use_high_contrast {     $ic-color-medium: #556572; }
$ic-color-medium-lighter:    #8B969E; // ash
@if $use_high_contrast {     $ic-color-medium-lighter: #556572; }
$heather:                    #A5AFB5; // heather
@if $use_high_contrast {     $ic-border-dark: #556572; }
$tiara:                      #C7CDD1; // tiara
@if $use_high_contrast {     $ic-border-color: #667887; }
$ic-color-medium-light:      #F5F5F5; // porcelain
@if $use_high_contrast {     $ic-color-medium-light: #FFFFFF; }
$ic-color-light:             #FFFFFF; // white


//================================
// Global light background colors
//================================
// These background color variables can be used on hover states or focus states
// and meet our contrast needs when used with our main color variables

$ic-bg-light-neutral:       $ic-color-medium-light;
$ic-bg-light-neutral-text:  #394B58;
@if $use_high_contrast { $ic-bg-light-neutral: #EBEDEE; }
$ic-bg-light-primary:       #E5F2F8;
@if $use_high_contrast { $ic-bg-light-primary: #E6F1F7;}
$ic-bg-light-primary-text:  #0078BD;
@if $use_high_contrast { $ic-bg-light-primary-text: $ic-brand-primary-high-contrast; }
$ic-bg-light-success:       #E8F6E9;
@if $use_high_contrast { $ic-bg-light-success: #E8F2E9; }
$ic-bg-light-success-text:  #008A13;
@if $use_high_contrast { $ic-bg-light-success-text: $ic-color-success; }
$ic-bg-light-alert:         #FBEDE7;
@if $use_high_contrast { $ic-bg-light-alert: #F9ECE8; }
$ic-bg-light-alert-text:    #D14604;
@if $use_high_contrast { $ic-bg-light-alert-text: $ic-color-alert; }
$ic-bg-light-danger:        #FCE8E7;
@if $use_high_contrast { $ic-bg-light-danger: #FBE8E8; }
$ic-bg-light-danger-text:   #EE0612;
@if $use_high_contrast { $ic-bg-light-danger-text: $ic-color-danger; }

//====================================
// DEPRECATED COLORS - DO NOT USE
//====================================

$ic-color-neutral:       hsl(0,0, 90%);
$gray-darker:            $ic-color-dark;
$gray-dark:              $ic-color-medium-darker;
$gray:                   $ic-color-medium;
$gray-light:             $ic-color-medium-light;
$gray-lighter:           $ic-color-light;

//==================
// Layout Variables
//==================
$right_side_width:          286px;
$right_side_margin:         13px;
$left_side_width:           175px;
$min_main_width:            510px;
$max_main_width:            1100px;
$ic-sp:                     12px;
$ic-border-radius:          $ic-sp/2;
$spacing-width:             20px; // TODO - would be nice to phase this one out for $ic-sp
$borderRadius:              4px;
$contentBoxPadding:         8px;

//============================
// Typography Variables
//============================

// Placeholder for old bootstrap variable; deprecated, but still in use some places
// Once all of those have been adjusted to use the new variable we can get rid of this
$ic-line-height: 1.5;

$ic-font-family: "LatoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
$ic-font-family-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif;
$ic-font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;

$ic-font-weight: bold; // we can phase this var out now we're on Lato

$ic-font-size: 16px;

$ic-font-size--xlarge:   $ic-font-size + 14;
$ic-font-size--large:    $ic-font-size + 9;
$ic-font-size--medium:   $ic-font-size + 2;
$ic-font-size--small:    $ic-font-size;
$ic-font-size--xsmall:   $ic-font-size - 2;

/* Legacy variables. Discontinue to use these: */
$h1-font-size:  23px;
$h2-font-size:  14px;
$h3-font-size:  19px;

//============================
// Layout Functional Variables
//============================
$ic-body-background-color:      lighten($ic-color-neutral, 4);
$ic-content-background-color:   $ic-color-light;
$ic-content-padding:            15px;
$ic-header-background:          #34444f;
$ic-header-primary-width:       84px;
$ic-header-primary-expanded-width: $ic-sp*15;
$ic-right-side-width: $ic-sp*24;

//============================
// List Functional Variables
//============================
$ic-list-item-background--hover:      #eef7ff;
$ic-list-item-background--selected:   #d9edf9;

//=====================
// Global border colors
//=====================
$ic-border-color:         $tiara;
// If it's a light border, it should be this color.
$ic-border-light:         $tiara;
// If it's a dark border, it should be this color.
// the most often use case for this is when the line is
// dashed on a light gray background so it visually
// looks the same as the outer border
$ic-border-dark:          $heather;

//=====================
// Text-color variables
//=====================
$ic-font-color-light:     $ic-color-light;
$ic-font-color-dark:      $ic-brand-font-color-dark;
@if $use_high_contrast { $ic-font-color-dark: $ic-color-dark; }
$ic-font-color--subdued:  $ic-brand-font-color-dark-lightened-15;
@if $use_high_contrast { $ic-font-color--subdued:  $ic-color-medium-darker; }
$ic-hint-text:            $ic-brand-font-color-dark-lightened-30;
@if $use_high_contrast { $ic-hint-text: $ic-color-medium; }

// textColor is a deprecated Bootstrap 2 variable. Please use $ic-font-color-dark!
$textColor:               $ic-font-color-dark; // deprecated - do not use

//=============================
// Link-color-related variables
//=============================
$ic-icon-link-color-hover: $ic-brand-font-color-dark-lightened-15;
@if $use_high_contrast {
$ic-icon-link-color-hover: $ic-font-color-dark;
}

$ic-icon-link-color:       $ic-brand-font-color-dark-lightened-30;
@if $use_high_contrast {
$ic-icon-link-color:       lighten($ic-font-color-dark, 12%);
}

// linkColor is a deprecated Bootstrap 2 variable
$linkColor:                 $ic-link-color; // deprecated - do not use
$linkColorHover:            $ic-link-color-darkened-10; // deprecated - do not use

//=====================
// Course Nav Variables
//=====================
// These variables control the active and hover
// states we have on the global left-hand sidenav in Canvas
$ic-course-sidenav_list-item--bg-color:               $ic-color-light;
@if $use_high_contrast {
$ic-course-sidenav_list-item--bg-color:               $ic-color-dark;
}
$ic-course-sidenav_list-item--active-font-color:      $ic-brand-primary;
@if $use_high_contrast {
$ic-course-sidenav_list-item--active-font-color:      $ic-color-light;
}
$ic-course-sidenav_list-item--inactive-font-color:    darken($ic-color-neutral, 12);

//===============
// Icon Variables
//===============
//To be used for any disabled icon states
$ic-color-icon-disabled:        darken($ic-color-neutral, 40);
@if $use_high_contrast {
$ic-color-icon-disabled:        darken($ic-color-neutral, 60);
}
$ic-dim-helper-text:            darken($ic-color-neutral, 45);
@if $use_high_contrast {
$ic-dim-helper-text:            darken($ic-color-neutral, 55);
}

//==========================================================
// Legacy Vendor Variables (please do not touch these files)
//==========================================================
// We will be phasing these out
@import 'vendor/bootstrap/variables';
@import 'vendor/jqueryui/variables';

//==============================
// Legacy Global Color Variables - DO NOT USE
//==============================
// These variables we have reworked to use our canvas color variables for the
// new UI, however they will need to be evaluated on a case-by-case basis of
// their use in Canvas in order to properly phase them out
// Nothing changes in the legacy UI.

$lightBackground:               $ic-color-medium-light;
$wellBackground:                $ic-color-light;
$altBG:                         $ic-bg-light-neutral;
$borderColor:                   $ic-border-light;
$activeBG:                      $ic-bg-light-primary;

//=====================
// Transition Variables
//=====================
// This is a pleasing transition that can be used when you need
// a transition timing function
$ic-transition: cubic-bezier(0,1,0.5,1);

//=======================
// Form-related variables
//=======================
$ic-horizontal-form-offset:       $ic-sp*16;
$ic-label-line-height:            1.3;
$ic-radio-checkbox-left-offset:   22px;


// override bootstrap green buttons
$green: #34832b !default;

// override default opacity for disabled classes
$ic-opacity-disabled: 0.6
